<%@ page language="java" contentType="text/html; charset=utf-8"%>
<%@ taglib prefix="s" uri="/struts-tags"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path;
%>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<title>Hyves.net - Always in touch with your friends</title>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<link href="<%=basePath %>/style/main.css" type="text/css"
			rel="stylesheet" />
		<link href="<%=basePath %>/style/style20.css" type="text/css"
			rel="stylesheet" />
		<link href="<%=basePath %>/images/favicon.ico" type="image/x-icon"
			rel="shortcut icon" />
		<link href="<%=basePath %>/style/ie6.css" type="text/css"
			rel="stylesheet" />
		<link href="<%=basePath%>/style/pagination.css" type="text/css"
			rel="stylesheet" />
		<script language="javascript"
			src="<%=basePath%>/script/jquery1.3.2.js" type="text/javascript"></script>
		<script language="javascript"
			src="<%=basePath%>/script/jquery.pagination.js"
			type="text/javascript"></script>
		<script language="javascript" src="<%=basePath%>/editor/xheditor.js"
			type="text/javascript"></script>
		<script language="javascript" type="text/javascript">
			$(document).ready(function(){
				/* 分页插件Pagination */
				var _total_num = $("#total").val();
				var _user_id = $("#userId").val();
				$("#pagination").pagination(_total_num, {
							items_per_page : 5,
							next_show_always : false,
							prev_show_always : false,
							callback : pageselectCallback
						});
				function pageselectCallback(page_index, jq) {
					$.ajax({
								type : "POST",
								dataType : "html",
								url : "<%=basePath%>/profile/page",
								data : {
									id : _user_id,
									page_index : page_index,
									maxResult : 5
								},
								success : function(data) {
									$("#scrap-body").html(data);
								}
							});
				}
				/* */
				$("#reactionSendReply").hide();
				$("#press_scrap").click(function(){
					$("#press_scrap>a").attr("href","#pagination");
					$("#reactionSendReply").show();
				});
				/* 留言板的ajax回复提交 */
				$('#scrapApplySubmitBtn:a').click(function() {
						/* 防止无内容提交 */
						if($(".xheditor-simple").val()==""){return false;}
						$("#scrapReplyForm").ajaxSubmit(scrap_reply);
						return false;
					});
				/* ajax更新留言板提交 */
				var scrap_reply= {
					success : function(data){
						$("#scrap-body:last").append(data).fadeIn("slow");
						document.form.reset();
					}
				};
			});
		</script>
	</head>
	<body>

		<jsp:include page="/site/common/header.jsp"></jsp:include>
		
		<!-- content begin -->
		<div id="page-con">
			<div id="page-con-hdr">
				<div class="box">
					<div id="page-con-info">
						<h1>
							${user.nick }
						</h1>
						<ul id="profile-menu">
							<li class="first">
								<a href="http://betang.hyves.nl/profile/">About</a> |
							</li>
							<li>
								<a href="http://betang.hyves.nl/friends/">Friends</a> |
							</li>
							<li>
								<a href="http://betang.hyves.nl/photos/">Photos</a> |
							</li>
							<li class="last" id="profile-menu-more">
								<a class="sub-menu-title" onclick="return false;"
									href="javascript:void(0);">More</a>
								<div class="sub-menu">
									<div class="sub-menu-bg">
										<div class="sub-menu-bg-pimp">
											<div class="sub-menu-hdr">
												<div class="sub-menu-hdr-bg"></div>
											</div>
											<ul>
												<li class="first">
													<a href="http://betang.hyves.nl/blog/">Blog</a>
												</li>
												<li>
													<a href="http://betang.hyves.nl/tips/">Tips</a>
												</li>
												<li>
													<a href="http://betang.hyves.nl/polls/">Polls</a>
												</li>
												<li>
													<a href="http://betang.hyves.nl/widget/">Gadgets</a>
												</li>
												<li>
													<a href="http://betang.hyves.nl/whowhatwhere/">WhoWhatWhere</a>
												</li>
												<li>
													<a href="http://betang.hyves.nl/pings/">Pings</a>
												</li>
												<li class="last">
													<a href="http://betang.hyves.nl/minibuzz/">Buzz</a>
												</li>
											</ul>
											<div class="sub-menu-bg-mf-pimp"></div>
										</div>
									</div>
								</div>
							</li>
						</ul>
					</div>
					<div id="page-con-optns">
						<ul>
							<li class="first last">
								<div class="more">
									<span class="rsaquo">› </span><a
										href="http://www.hyves.nl/goldmember/pimp/?ref=pimp_balloon&amp;ga_campaign=pimp_balloon">Add
										a textballoon?</a>
								</div>
								<div class="more">
									<span class="rsaquo">› </span><a class="action-text"
										title="Pimp my profile!"
										href="http://www.hyves.nl/profilemanage/layout/pimp/">Pimp
										my profile!</a>
								</div>
							</li>
						</ul>
					</div>
					<div class="box-con-bg"></div>
				</div>
				<div class="border"></div>
				<div class="bg"></div>
			</div>
			<!-- page-con-hdr -->
			<div id="page-con-body">
				<div class="wrapper w1">
					<div class="section s1">
						<div class="meta-box no-hdr" id="left-banner">
							<div class="meta-box-con">
								<div class="meta-box-con-bg"></div>
								<div class="meta-box-con-inner">
									<ul>
										<li class="first">
											<div class=" avatar profile">
												<a href="http://betang.hyves.nl/photos/2/0/v7kz/"><img
														title="${user.nick }" height="165" alt="${user.nick }"
														src="<%=basePath %>/images/user-header/${user.header }"
														width="200" /> </a>
											</div>
										</li>
										<li>
											<ul class="left-banner-actns">
												<li class="first">
													<a id="fi_pokeme_icon" onclick="return false;"
														href="javascript:void(0);"><span
														class="icon icon-ping span-icon">&nbsp;</span>
													</a>
													<a id="fi_pokeme_link" onclick="return false;"
														href="javascript:void(0);">Add pings options</a>
												</li>
												<li>
													<a id="a_35677aa3"
														href="http://www.hyves.nl/berichten/?autoOpenNew=1&amp;username=betang"><span
														class="icon icon-email span-icon">&nbsp;</span>
													</a>
													<a id="a_70a055d2"
														href="http://www.hyves.nl/berichten/?autoOpenNew=1&amp;username=betang">Message</a>
												</li>
												<li class="last">
													<a id="a_cba61c76"
														href="http://betang.hyves.nl/?module=statistics&amp;action=google&amp;memberId=10359538"
														target="_blank"><span
														class="icon icon-google span-icon">&nbsp;</span>
													</a>
													<a id="a_57db2f65"
														href="http://betang.hyves.nl/?module=statistics&amp;action=google&amp;memberId=10359538"
														target="_blank">Google Tony</a>
												</li>
											</ul>
										</li>
										<li class="last"></li>
									</ul>
								</div>
							</div>
						</div>
					</div>
					<!-- section s1 -->
					<div class="section s2">
						<div class="box profile-overview">
							<div class="box-hdr">
								<div class="box-hdr-bg"></div>
								<div class="box-hdr-inner">
									<h2>
										<a href="http://betang.hyves.nl/profile/">Profile </a>
									</h2>
									<div class="box-actns">
										<ul>
											<li class=" first">
												<a class="icon icon-edit action-icon-text"
													href="http://www.hyves.nl/profilemanage/profileinfo/information/">edit</a>
											</li>
										</ul>
									</div>
								</div>
							</div>
							<div class="box-con">
								<div class="box-con-bg"></div>
								<div class="box-con-inner">
									<div class="box-con-sctn first">
										<p>
											<label>
												姓名:
											</label>
											${user.userDetail.realname }
										</p>
										<p>
											<label>
												生日:
											</label>
											${user.userDetail.birthday }
										</p>
										<p>
											4
											<a id="a_b666f783"
												href="http://www.hyves.nl/statistics/settings/?ga%5Fcampaign=viewtimes%5Fnogm/">times
												viewed-by who?</a>, Hyver since ${user.created }
										</p>
									</div>
									<div class="box-con-sctn">
										<p>
											<label>
												Hangouts:
											</label>
											<a class="action-text" id="spothelp" onclick="return false;"
												href="javascript:void(0);" type="text">(?)</a>
											<a class="personal_link"
												onclick="javascript:GATracker('/navigationtools/frithm/profile/addownspot');"
												href="http://www.hyves.nl/profilemanage/profileinfo/spotedit/">Click
												here to add your own hangouts</a>!
										</p>
										<div class="help-text" id="hlp_24ab69b1" style="DISPLAY: none">
											Hangouts are the networks for restaurants, bars and clubs.
											Great for staying informed, sharing photos and getting in
											touch with other regulars.
											<a class="Bold"
												onclick="javascript:GATracker('/navigationtools/spot/home/editprofile');"
												href="http://www.hyves.nl/profilemanage/profileinfo/spotedit/">Click
												here</a> to add hangouts to your profile!
										</div>
										<p>
											<label>
												School:
											</label>
											<a
												href="http://www.hyves.nl/facebook/1009559/School/Thorbecke_Scholengemeenschap/">Thorbecke
												Scholengemeenschap</a>
										</p>
									</div>
									<div class="more">
										<span class="rsaquo">› </span><a class="action-text"
											href="http://betang.hyves.nl/profile/">View full profile</a>
									</div>
								</div>
							</div>
						</div>
						<div class="box etc-overview">
							<div class="box-hdr">
								<div class="box-hdr-bg"></div>
								<div class="box-hdr-inner">
									<h2>
										<span class="box-icon icon icon-profile">&nbsp;</span>
										Ta的动态
									</h2>
								</div>
							</div>
							<div class="box-con">
								<div class="box-con-bg"></div>
								<div class="box-con-inner">
									<div class="box-con-sctn first"></div>
								</div>
							</div>
						</div>
					</div>
					<!-- section s2 -->
					<div class="section s3">
						<div class="box friends-overview">
							<div class="box-hdr">
								<div class="box-hdr-bg"></div>
								<div class="box-hdr-inner">
									<h2>
										<a href="http://betang.hyves.nl/friends/"><span
											class="box-icon icon icon-friends">&nbsp;</span> Friends (${friendList.size(); })
										</a>
									</h2>
								</div>
							</div>
							<div class="box-con">
								<div class="box-con-bg"></div>
								<div class="box-con-inner">
									<ul class="avatar-list">
										<s:iterator value="friendList" id="f">
										<li>
											<div class="avatar large">
												<a class="avatar-link" title="${f.nick }"
													href="<%=basePath %>/profile/?id=${f.id }"><img class="avatar-img"
														alt="${f.nick }"
														src="<%=basePath %>/images/user-header/${f.header }" />
												</a>
												<p class="avatar-name">
													<a title="${f.nick }" href="<%=basePath %>/profile/?id=${f.id }">${f.nick } (${f.userFriendShip.size() })</a>
												</p>
											</div>
										</li>
										</s:iterator>
									</ul>
									<p>
										Curious which friends already joined Hyves?
										<a href="http://www.hyves.nl/friends/networktool/">
											Compare your addressbook to ours!
											<div class="more">
												<span class="rsaquo">› </span>
										</a>
									</p>
									<a href="http://betang.hyves.nl/friends/">More friends</a>
								</div>
							</div>
						</div>
					</div>
					<div class="box buzz-overview toggle" id="buzz-overview">
						<div class="box-hdr">
							<div class="box-hdr-bg"></div>
							<div class="box-hdr-inner">
								<a class="cllps" href="javascript:void(0);">-</a>
								<h2>
									<a href="http://betang.hyves.nl/minibuzz/"><span
										class="box-icon icon icon-buzz">&nbsp;</span> Buzz </a>
								</h2>
								<div class="box-actns">
									<ul>
										<li class=" first">
											<a class="icon icon-settings action-icon-text"
												href="http://www.hyves.nl/profilemanage/privacy/buzz/">Buzz
												settings</a>
										</li>
									</ul>
								</div>
							</div>
						</div>
						<div class="box-con" id="buzz-toggle">
							<div class="box-con-bg"></div>
							<div class="box-con-inner">
								<div class="box-con-sctn">
									<p>
										Buzz by default only visible for friends.
									</p>
								</div>
								<div class="box-con-sctn first">
									<h3>
										Today:
									</h3>
									<ul>
										<li class="first">
											<div class="fi_div"
												id="feedItem_2717859608_10359538_10359538">
												<div class="buzz-descr">
													<span class="icon icon-reaction span-icon">&nbsp;</span>
													<a id="member_id_link_159f37bf697dcbf89bdbb284e4dc6d86"
														href="http://betang.hyves.nl/">Tony</a> commented on blog
													<a class="c9"
														href="http://hyves.nl/redirect/|6||10359538|||9||29072492|YaRz|">111111111111111111</a>
													of
													<a href="http://betang.hyves.nl/">Tony</a>
												</div>
												<div class="buzz-optns">
													<a class="list-tls icon icon-delete action-icon"
														id="signal_delete_2717859608_10359538_10359538"
														title="delete" onclick="return false;"
														href="javascript:void(0);"></a>
												</div>
											</div>
										</li>
										<li class="last alt">
											<div class="fi_div"
												id="feedItem_2515263866_10359538_10359538">
												<div class="buzz-descr">
													<span class="icon icon-respect span-icon">&nbsp;</span>
													<a id="member_id_link_798de4d749238ec6ae489d90cd5d8626"
														href="http://betang.hyves.nl/">Tony</a> respects the blog
													<a class="c9"
														href="http://hyves.nl/redirect/|6||10359538|||9||29072492|YaRz|">111111111111111111</a>
													of
													<a href="http://betang.hyves.nl/">Tony</a>
												</div>
												<div class="buzz-optns">
													<a class="list-tls icon icon-delete action-icon"
														id="signal_delete_2515263866_10359538_10359538"
														title="delete" onclick="return false;"
														href="javascript:void(0);"></a>
												</div>
											</div>
										</li>
									</ul>
								</div>
								<div class="box-con-sctn">
									<h3>
										Earlier:
									</h3>
									<ul>
										<li class="first">
											<div class="fi_div" id="feedItem_970183120_10359538_10359538">
												<div class="buzz-descr">
													<span class="icon icon-reaction span-icon">&nbsp;</span>
													<a id="member_id_link_66fe1d1de7955a68898c1876ba68d81c"
														href="http://betang.hyves.nl/">Tony</a> commented on event
													<a class="c1"
														href="http://hyves.nl/redirect/|35||18117|||1||4853351|smvuLK3kseAO5WL7fJZ7lQ==|">SUNDAY
														SESSIONS met FERIAL</a> of
													<a href="http://ferialmusic.hyves.nl/">Ferial</a> in
													<a href="http://hyves.nl/redirect/|35||18117||">LifestyleS</a>
												</div>
												<div class="buzz-optns">
													<a class="list-tls icon icon-delete action-icon"
														id="signal_delete_970183120_10359538_10359538"
														title="delete" onclick="return false;"
														href="javascript:void(0);"></a>
												</div>
											</div>
										</li>
										<li class="alt">
											<div class="fi_div"
												id="feedItem_1111205322_10359538_10359538">
												<div class="buzz-descr">
													<span class="icon icon-subscription span-icon">&nbsp;</span>
													<a id="member_id_link_5d2eb1337e1309b4b1735eec2cdc571b"
														href="http://betang.hyves.nl/">Tony</a> is now a member of
													the hyve
													<a href="http://lifestyles.hyves.nl/">LifestyleS</a>
												</div>
												<div class="buzz-optns">
													<a class="list-tls icon icon-delete action-icon"
														id="signal_delete_1111205322_10359538_10359538"
														title="delete" onclick="return false;"
														href="javascript:void(0);"></a>
												</div>
											</div>
										</li>
										<li class="last">
											<div class="fi_div" id="feedItem_682410582_10359538_10359538">
												<div class="buzz-descr">
													<span class="icon icon-subscription span-icon">&nbsp;</span>
													<a id="member_id_link_337ac7ff77ff0f3f13872b4a6be42289"
														href="http://betang.hyves.nl/">Tony</a> is now a member of
													the school
													<a
														href="http://www.hyves.nl/facebook/1009559/School/Thorbecke_Scholengemeenschap/">Thorbecke
														Scholengemeenschap</a>
												</div>
												<div class="buzz-optns">
													<a class="list-tls icon icon-delete action-icon"
														id="signal_delete_682410582_10359538_10359538"
														title="delete" onclick="return false;"
														href="javascript:void(0);"></a>
												</div>
											</div>
										</li>
									</ul>
								</div>
								<div class="more">
									<span class="rsaquo">› </span><a
										href="http://betang.hyves.nl/minibuzz/">View all buzz</a>
								</div>
							</div>
						</div>
					</div>
					<div class="box www-overview">
						<div class="box-hdr">
							<div class="box-hdr-bg"></div>
							<div class="box-hdr-inner">
								<h2>
									<a href="http://betang.hyves.nl/whowhatwhere/"><span
										class="box-icon icon icon-world">&nbsp;</span>WhoWhatWhere</a>
								</h2>
								<div class="box-actns">
									<ul>
										<li class=" first">
											<a class="icon icon-add action-icon-text"
												id="overview_locationhistory_popup_link"
												onclick="return false;" href="javascript:void(0);">Place
												new WWW</a>
										</li>
										<li>
											<a class="icon icon-world action-icon-text"
												href="http://betang.hyves.nl/whowhatwhere/">Overview</a>
										</li>
									</ul>
								</div>
							</div>
						</div>
						<div class="box-con">
							<div class="box-con-bg"></div>
							<div class="box-con-inner">
								<div class="box-con-sctn first">
									Figuring out Hyves @ home
									<div class="box-con-sctn-prop">
										<span class="date">today, 15:58</span> -
										<a href="http://betang.hyves.nl/whowhatwhere/176821192/7oFG/">Comment</a>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
				<!-- section s3 -->
			</div>
			<!-- wrapper w1 -->
			<div class="wrapper w2">
				<div class="section s1">
					<div class="box media-profile">
						<div class="box-hdr">
							<div class="box-hdr-bg"></div>
							<div class="box-hdr-inner">
								<h2>
									<a href="http://betang.hyves.nl/photos/"><span
										class="box-icon icon icon-picture">&nbsp;</span>Photos &amp;
										videos</a>
								</h2>
								<div class="box-actns">
									<ul>
										<li class=" first">
											<a class="icon icon-add action-icon-text"
												href="http://www.hyves.nl/profilemanage/add/photos/">add
												photos &amp; videos</a>
										</li>
									</ul>
								</div>
							</div>
						</div>
						<div class="box-con">
							<div class="box-con-bg"></div>
							<div class="box-con-inner">
								<ul class="media-list">
									<li class="first last">
										<div>
											<a
												href="http://betang.hyves.nl/album/45669423/Friends/L6lU7Ic2/photos/777303307/0/Qy8N/"><img
													title="776989838_3_yDUR.jpg" height="87"
													alt="776989838_3_yDUR.jpg"
													src="Tony - Hyves_nl - Always in touch with your friends.files/777303307_16_Qy8N.jpg"
													width="87" /> </a>
										</div>
									</li>
								</ul>
								<div class="more">
									<span class="rsaquo">› </span><a
										href="http://betang.hyves.nl/photos/">View more photos
										&amp; videos</a>
								</div>
							</div>
						</div>
					</div>
				</div>
				<!-- section s1 -->
				<div class="section s2">
					<div class="box groups-overview">
						<div class="box-hdr">
							<div class="box-hdr-bg"></div>
							<div class="box-hdr-inner">
								<h2>
									<span class="box-icon icon icon-groups">&nbsp;</span> Hyves (${groupList.size() })
								</h2>
							</div>
						</div>
						<div class="box-con">
							<div class="box-con-bg"></div>
							<div class="box-con-inner">
								<div class="avatar-list">
									<div>
										<ul>
											<s:iterator value="groupList" id="g">
											<li>
												<div class="avatar large">
													<a class="avatar-link" title="${g.name }" href="<%=basePath %>/group/view/id=${g.id }"><img
															class="avatar-img mediaicon14" alt="${g.name }"
															src="<%=basePath %>/images/group-header/${g.groupHeader }" />
													</a>
													<p class="avatar-name">
														<a href="<%=basePath %>/group/view/id=${g.id }">${g.name }</a>
														(${g.groupUserShip.size() })
													</p>
												</div>
											</li>
											</s:iterator>
										</ul>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
				<!-- section s2 -->
			</div>
			<!-- wrapper w2 -->
			<div class="wrapper w2">
				<div class="section s1">
					<a href="javascript:void(0);" name="scraps" id="scraps"
						onclick="return false;"></a>
					<div class="box reactions">
						<div class="box-hdr">
							<div class="box-hdr-bg"></div>
							<div class="box-hdr-inner">
								<h2>
									<span class="box-icon icon icon-scraps">&nbsp;</span>留言 (${total })
								</h2>
								<div class="box-actns">
									<ul>
										<li class="first">
											<a class="icon icon-delete action-icon-text"
												id="massDeleteScrapsLink" onclick="return false;"
												href="javascript:void(0);">删除所有留言</a>
										</li>
									</ul>
								</div>
							</div>
						</div>
						<div class="box-con">
							<div class="box-con-bg"></div>
							<div class="box-con-inner">
							<input id="total" type="hidden" value="${total }" />
							<input id="userId" type="hidden" value="${user.id }" />
								<div align="right" id="press_scrap"><a href="javascript:void(0)">给Ta留言...</a></div>
								<div id="scrap-body">
									<img alt="Loading..." src="<%=basePath %>/images/loading.gif"></img>
								</div>
								<div id="pagination" class="pagination paging"></div>
								<div class="box-con-sctn">
									<div id="reactionSendReply">
										<form name="form" action="<%=basePath %>/profile/saveScrap?id=${user.id }" method="post" id="scrapReplyForm">
											<textarea class="xheditor-simple" name="scrap.content" rows="12" style="width: 450px"></textarea>
											<br><span class="button primary-button"><span>
												<input id="scrapApplySubmitBtn" type="submit" value="留言"/>
											</span></span>	
										</form>	
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
				<!-- section s1 -->
				<div class="section s2">
					<div id="btf_frithm"></div>
				</div>
				<!-- section s2 -->
			</div>
			<!-- wrapper w2 -->
			<div class="border"></div>
			<div class="bg"></div>
		</div>
		<!-- page-con-body -->
		<div id="page-con-ftr">
			<div class="border"></div>
			<div class="bg"></div>
		</div>
		<!-- page-con-ftr -->
		</div>

		<jsp:include page="/site/common/footer.jsp" />
	</body>
</html>